<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title">工具借还统计</div>
    </template>
    <el-descriptions :column="2">
      <el-descriptions-item
        v-for="(item, index) in infoList"
        :key="index"
        :label="item.label"
      >
        <template v-slot:label>
          <img
            :src="item.icon"
            style="width: 20px; vertical-align: middle"
            class="mr-2"
          />
          <span style="vertical-align: middle; color: #888"
            >{{ item.label }}：</span
          >
        </template>
        <span
          class="font-bold"
          :style="item.style ? item.style(info[item.prop]) : null"
          >{{
            item.formatter ? item.formatter(info[item.prop]) : info[item.prop]
          }}</span
        >
      </el-descriptions-item>
    </el-descriptions>
    <div />
  </el-card>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import s1 from "@/assets/home/s1.png";
import s2 from "@/assets/home/s2.png";
import s3 from "@/assets/home/s3.png";
import s4 from "@/assets/home/s4.png";
import s5 from "@/assets/home/s5.png";
import s6 from "@/assets/home/s6.png";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

const col = {
  danger: "#E05156",
  success: "#46C687"
};

const info = computed(() => props.data || {});
const infoList = [
  { label: "借还记录", prop: "lendReturnCount", icon: s1 },
  {
    label: "盘点结果",
    prop: "nearestStockTakeResult",
    formatter: val => (val == 1 ? "正常" : "异常"),
    icon: s2,
    style: (val: any) => {
      const color = val == 1 ? col.success : col.danger;
      return { color };
    }
  },
  {
    label: "定检超期率",
    prop: "inspectOutTimePercent",
    formatter: val => val + "%",
    icon: s3
  },
  {
    label: "盘亏",
    prop: "loss",
    icon: s4,
    style: () => ({ color: col.danger })
  },
  {
    label: "借还超期率",
    prop: "lendReturnOutTimePercent",
    formatter: val => val + "%",
    icon: s5
  },
  {
    label: "盘赢",
    prop: "profit",
    icon: s6,
    style: () => ({ color: col.success })
  }
];
</script>

<style scoped lang="scss">
::v-deep(.el-descriptions__label) {
  margin-right: 0px;
}
</style>
